import React, { Component } from 'react';
import pic from '../shop.png'
import './Mylist.css'
class Mylist extends Component {
    constructor(porps){
        super(porps);
        this.state={
            count:0,
            list:["综合","销量","新品","价格","筛选"],
                    shoplist:[
                        {name:"高级化妆品【1】1651654648944656",img:pic,originalPrice:270,price:215},
                        {name:"高级化妆品【2】1651654648944656",img:pic,originalPrice:273,price:222},
                        {name:"高级化妆品【3】1651654648944656",img:pic,originalPrice:274,price:188},
                        {name:"高级化妆品【4】1651654648944656",img:pic,originalPrice:278,price:255},
                        {name:"高级化妆品【5】1651654648944656",img:pic,originalPrice:279,price:660},
                        {name:"高级化妆品【6】1651654648944656",img:pic,originalPrice:276,price:711},
                        {name:"高级化妆品【7】1651654648944656",img:pic,originalPrice:277,price:982},
                        {name:"高级化妆品【8】1651654648944656",img:pic,originalPrice:278,price:255},
                        {name:"高级化妆品【9】1651654648944656",img:pic,originalPrice:272,price:249},
                        {name:"高级化妆品【10】1651654648944656",img:pic,originalPrice:210,price:248},
                    ]
        }
        
    }
    click(index){
        this.setState({
            count:index
            
        },()=>{
            console.log(this.state.count)
        });
        // if(this.state.count == 3){
        //     this.state.shoplist.sort(a,b){
        //         return a.price - b.price;
        //     }
        // };
    }
    render() {
        return (
            <div className='shop'>
                <div className='topbar'>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <div className='btn' key={index} onClick={()=>{this.click(index)}}>{item}</div>
                            )
                        })
                    }
                </div>
                <div className='list'>
                    {
                        this.state.shoplist.map((item,index)=>{
                            return (
                                <div className='shopbox' key={index}>
                                    <img src={item.img} alt="" />
                                    <div>
                                        <div className='name'>{item.name}</div>
                                        <div className='originalPrice'>原价￥{item.originalPrice}</div>
                                        <div className='price'>活动价￥{item.price}</div>
                                    </div>
                                    
                                </div>  
                            )
                            
                        })
                    }
                </div>
            </div>
        );
    }

}

export default Mylist;